$(function () {
  const layer = layui.layer;
  const form = layui.form;
  const laypage = layui.laypage;
  // 文本域初始化
  initEditor();

  // 开始时间
  layui.use("laydate", function () {
    var laydate = layui.laydate;
    laydate.render({
      elem: "#test-startDate-1",
    });
  });
  // 结束时间
  layui.use("laydate", function () {
    var laydate = layui.laydate;
    laydate.render({
      elem: "#test-endDate-1",
    });
  });
  layui.use("laydate", function () {
    var laydate = layui.laydate;
    laydate.render({
      elem: "#test1",
    });
  });
  // 定义需要传递的参数
  const data = {
    start_time: "",
    end_time: "",
    title: "",
    cateid: "",
    page: 1,
    limit: 10,
  };

  // 1.获取所有分类，并渲染到列表里
  getInitContentList();
  function getInitContentList() {
    $.ajax({
      method: "GET",
      url: "http://124.223.14.236:8060/admin/ydd_cate/list",
      data: {
        catename: "",
        page: 1,
        limit: 10,
      },
      headers: {
        "x-token": localStorage.getItem("x-token"),
      },
      success: function (res) {
        if (res.errno !== 0) return;
        let htmlStr = template("tpl-cate", res.data);
        $("#cate_id").html(htmlStr);
        // 新增页面的分类
        $("#cateName").html(htmlStr);
        form.render();
      },
    });
  }

  // 2.初始化并渲染页面
  getInitArticleList();
  function getInitArticleList() {
    $.ajax({
      method: "GET",
      url: "http://124.223.14.236:8060/admin/ydd_article/list",
      data,
      headers: {
        "x-token": localStorage.getItem("x-token"),
      },
      success: function (res) {
        if (res.errno !== 0) return;

        const htmlStr = res.data.data
          .map((item) => {
            const {
              id,
              title,
              catename,
              pic,
              create_date,
              ishot,
              istop,
              status,
            } = item;
            return `
            <tr>
              <td name="ID">${id}</td>
              <td name="user-title">${title}</td>
              <td name="user-a">${catename}</td>
              <td name="user-b">
                <div>
                  <img src="http://124.223.14.236:8060/${pic}" style="width:120px">
                </div>
              </td>
              <td name="user-c">${dateFilter(create_date)}</td>
              <td name="user-d">
                <form class="layui-form" action="">
                  <input type="checkbox" name="xxx" lay-skin="switch">
                  <div class="${
                    ishot === 0
                      ? "layui-unselect layui-form-switch"
                      : "layui-unselect layui-form-switch layui-form-onswitch"
                  }" lay-skin="_switch">
                    <em></em>
                    <i></i>
                  </div>
                </form> 
              </td>
              <td name="user-e">
                <form class="layui-form" action="">
                  <input type="checkbox" name="xxx" lay-skin="switch">
                  <div class="${
                    istop === 0
                      ? "layui-unselect layui-form-switch"
                      : "layui-unselect layui-form-switch layui-form-onswitch"
                  }" lay-skin="_switch">
                    <em></em>
                    <i></i>
                  </div>
                </form> 
              </td>
              <td name="user-f">
                <div class="layui-btn-container">
                  ${
                    status === 0
                      ? '<button type="button" class="layui-btn">待审核</button>'
                      : ""
                  }
                  ${
                    status === 1
                      ? '<button type="button" class="layui-btn">草稿箱</button>'
                      : ""
                  }
                  ${
                    status === 2
                      ? '<button type="button" class="layui-btn">已发布</button>'
                      : ""
                  }
                  ${
                    status === 3
                      ? '<button type="button" class="layui-btn">已删除</button>'
                      : ""
                  }
                </div>
              </td>
              <td name="user-g">
                <button type="button" class="layui-btn layui-btn-xs colpile btnEdit" data-id="${
                  item.id
                }"><i
                    class="layui-icon layui-icon-edit"></i></button>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btnDel" data-id="${
                  item.id
                }"><i
                  class="layui-icon layui-icon-delete"></i></button>
              </td>
            </tr>
          `;
          })
          .join("");
        $("tbody").html(htmlStr);
        // 调用分页函数，并将所有数据的总数当做实参传递
        renderPage(res.data.count);
      },
    });
  }

  // 3.分页功能
  // 2.分页函数
  function renderPage(total) {
    // 调用layui中的laypage.render()方法渲染分页的结构
    laypage.render({
      elem: "page_box", //注意，这里的 test1 是 ID，不用加 # 号
      count: total, // 数据总数，从服务端得到
      limit: data.limit, //每页显示多条数据
      curr: data.page, // 默认选中的分页
      jump: function (obj, first) {
        //obj:包含了当前分页的所有参数; first:是否首次，一般用于初始加载的判断
        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); //得到每页显示的条数
        // 把获取最新的页码值，赋值给data对象中的pagenum
        data.page = obj.curr;

        // 把获取最新的显示数据，赋值给data对象中的pagesize
        data.limit = obj.limit;
        //首次不执行
        // 如果是首次就不执行下面代码，否则就执行
        if (!first) {
          getInitArticleList();
        }
      },
      // 分页器显示的具体样式
      layout: ["count", "limit", "prev", "page", "next", "skip"],
      limits: [2, 5, 10, 20, 50],
    });
  }
  // 4.定义时间过滤器
  function dateFilter(date) {
    const dt = new Date(date);

    let y = dt.getFullYear();
    let m = padZero(dt.getMonth() + 1);
    let d = padZero(dt.getDate());

    let hh = padZero(dt.getHours());
    let mm = padZero(dt.getMinutes());
    let ss = padZero(dt.getSeconds());
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
  }

  // 补零函数
  function padZero(n) {
    return n > 9 ? n : "0" + n;
  }

  // 5.新增功能 切换页面
  $("#addClassify").on("click", function () {
    $("#mainCt").hide();
    $(".layui-card-header").hide();
    $("#addArticle").show();

    // 点击返回主页面
    $("#lsc-return").click(function () {
      $("#addArticle").hide();
      $("#mainCt").show();
    });
  });

  // 6.编辑功能 => 点击上传按钮，跳出file文件上传
  $("#artBtnUploda").on("click", function () {
    $("#coverFileUpdata").click();
  });

  // 7.监听上传文件change事件
  $("#coverFileUpdata").on("change", function (e) {
    const files = e.target.files;
    // 拿到当前文件
    if (files.length === 0) return layer.msg("请选择图片");

    // 拿到当前文件转成URL地址
    const urlFile = URL.createObjectURL(files[0]);
    // console.log(urlFile)
    // 转成url后重新赋值给img
    $("#img-avatar-pic").attr("src", urlFile);

    const fd = new FormData();
    fd.append("file", files[0]);
    // 可以获取fd中被append图片文件
    // console.log(fd.get('pic'))

    $.ajax({
      method: "POST",
      url: "http://124.223.14.236:8060/admin/common/upload?type=images",
      data: fd,
      headers: {
        // 'Content-Type': 'multipart/form-data',
        "x-token": localStorage.getItem("x-token"),
      },
      contentType: false,
      processData: false,
      success: function (res) {
        console.log(res);
      },
    });
  });

  // 8.编辑功能
  $("tbody").on("click", ".btnEdit", function () {
    $("#mainCt").hide();
    $("#editArticle").show();

    const id = $(this).attr("data-id");

    $.ajax({
      method: "GET",
      url: `http://124.223.14.236:8060/admin/ydd_article/rowInfo?id=${id}`,
      headers: {
        "x-token": localStorage.getItem("x-token"),
      },
      success: function (res) {
        if (res.errno !== 0) return;
        // 快速赋值表单

        form.render();
        // 渲染页面信息
        form.val("form-edit", res.data);
        $("#test2").val(dateFilter(res.data.create_date));
        $("#lovenum").val(res.data.lovenum);
        $(".tags").val(res.data.tags);
        $("#textarea1").val(res.data.keywords);
        $("#textarea2").val(res.data.description);
        $("#content").val(res.data.content);
        $("#img-avatar-edit").attr(
          "src",
          `http://124.223.14.236:8060/${res.data.pic}`
        );
        console.log(res.data.istop);
        if (res.data.istop === 0) {
          $("#ipt1").checked = true;
        } else {
          $("#ipt2").checked = true;
        }
        if (res.data.istop === 0) {
          $("#ipt3").checked = true;
        } else {
          $("#ipt4").checked = true;
        }
      },
    });

    // 获取分类数据请求并渲染
    function getAllData(count) {
      $.ajax({
        method: "get",
        url: "http://124.223.14.236:8060/admin/ydd_cate/all",
        headers: {
          "x-token": localStorage.getItem("x-token"),
        },
        success: function (res) {
          let newStr = res.data
            .map((item) => {
              return ` <option value=${item.id}>${item.catename}</option>`;
            })
            .join("");
          newStr = `<option>请选择</option>` + newStr;
          $(count).html(newStr);
          form.render();
        },
      });
    }
    getAllData("[name=cateid]");

    // 上传图片功能
    $("#editBtnUpdata").on("click", function () {
      $("#editFile").click();
    });

    // 7.监听上传文件change事件
    let imgs = $("#editFile").on("change", function (e) {
      // 拿到当前文件
      const files = e.target.files;
      if (files.length === 0) return layer.msg("请选择图片");

      // 拿到当前文件转成URL地址
      const urlFile = URL.createObjectURL(files[0]);
      // console.log(urlFile)
      // 转成url后重新赋值给img
      $("#img-avatar-edit").attr("src", urlFile);

      const fd = new FormData();
      fd.append("file", files[0]);
      // 可以获取fd中被append图片文件
      return urlFile;
    });
    // 9.编辑页面返回主页面
    $("#returnBtn").on("click", function () {
      $("#editArticle").hide();
      $("#mainCt").show();
      getInitContentList();
    });

    // 10.编辑发起ajax请求
    $("#editFormUpdata").on("submit", function (e) {
      e.preventDefault();
      let ishot = $("#sw1").prop("checked") ? 1 : 0;
      let istop = $("#sw2").prop("checked") ? 1 : 0;
      const data = {
        cateid: $("#editCateName [name=cateid]").val(),
        title: $("#editFormUpdata [name=title]").val(),
        click: $("#editFormUpdata [name=click]").val(),
        author: $("#editFormUpdata [name=author]").val(),
        create_date: $("#time_text").val(),
        lovenum: $("#editFormUpdata [name=lovenum]").val(),
        tags: $("#editFormUpdata [name=tags]").val(),
        keywords: $("#editFormUpdata [name=keywords]").val(),
        content: $("#editFormUpdata [name=content]").val(),
        pic: imgs,
        ishot: ishot,
        istop: istop,
        status: "2",
        id: parseInt(id),
      };
      $.ajax({
        method: "POST",
        url: "http://124.223.14.236:8060/admin/ydd_article/update",
        data: JSON.stringify(data),
        contentType: "application/json",
        dataType: "json",
        headers: {
          "x-token": localStorage.getItem("x-token"),
        },
        success: function (res) {
          if (res.errno !== 0) return;
          $("#editArticle").hide();
          $("#mainCt").show();
          getInitArticleList();
        },
      });
    });
  });

  // 11.删除
  $("tbody").on("click", ".btnDel", function () {
    const id = $(this).attr("data-id");
    layer.confirm(
      "确认删除文章吗?",
      { icon: 3, title: "删除文章" },
      function (index) {
        $.ajax({
          method: "GET",
          headers: {
            "x-token": localStorage.getItem("x-token"),
          },
          url: `http://124.223.14.236:8060/admin/ydd_article/del?id=${id}`,
          success: function (res) {
            if (res.errno !== 0) {
              return layer.msg(res.errmsg);
            }
            layer.msg("删除成功！");
            getInitArticleList(data);
          },
        });
        layer.close(index);
      }
    );
  });

  // 13.搜索功能
  $("#ipt-search").on("submit", function (e) {
    e.preventDefault();
    // 标题
    data.title = $("#title").val();
    // 分类

    // 时间

    getInitArticleList(data);
  });

  // 14.重置功能
  $("#lsc-reset").click(function () {
    $("#ipt-search")[0].reset();
    getInitArticleList(data);
  });

  // 15.点击小盒子筛选
  $("#lsc-chosen").click(function () {

    $(".lsc-chosenBox").toggle();
    // 给小盒子注册change事件，通过判断盒内复选框是否选中来控制所有th和td的显示隐藏

    $('body').on('change','.ipt',function(){
      this.checked ? $(`[name=${this.id}]`).show() : $(`[name=${this.id}]`).hide()
    })

    // $('.lsc-chosenBox input[name]').change(function(event) {
    //   let a = $(event.target).attr('name')
    //   let myCheckbox = $(`input[name="${a}"]`);
    //   if ($(this).is(':checked')) {
    //     $(`th[name="${a}"]`).show()
    //     var tdList = document.querySelectorAll(`td[name="${a}"]`);
    //     for (var i = 0; i < tdList.length; i++) {
    //       tdList[i].style.display = 'block';
    //     }
    //     // 当前元素被选中
    //     // 执行你要执行的代码
    //   } else {
    //     $(`th[name="${a}"]`).hide()
    //     var tdList = document.querySelectorAll(`td[name="${a}"]`);
    //     for (var i = 0; i < tdList.length; i++) {
    //       tdList[i].style.display = 'none';
    //     }
    //     // 当前元素被取消选中
    //     // 执行你要执行的代码
    //   }
    // });













  });
});
